import React, { useEffect, useState, memo } from 'react'
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
import { Skeleton } from 'antd'
import { ipList as presentIp } from '../../ipConfig'

const RoomDetail = ({ time, registerId }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let url = `${presentIp.DEV_IP}/card_data?registerId=${registerId}&leftTime=${time[0]}&rightTime=${time[1]}`
    setLoading(true)
    console.log(url)
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        console.log(json.data)
        setData(json.data)
        setLoading(false)
      })
  }, [registerId, time])

  useEffect(() => {
    if (data) {
      const ds = new DataSet()
      let flag1 = 0
      let flag2 = 0

      const first1 = { firstInTime: 0, firstOutTime: 0 }
      const last1 = { lastInTime: 0, lastOutTime: 0 }
      let lastRange1 = {
        lastInTime: 0,
        lastOutTime: 0,
        lastInTimes: 0,
        lastOutTimes: 0,
      }
      const dv = ds.createView('origin').source(data)
      dv.transform({
        type: 'map',
        callback(row) {
          if (!flag1 && row.status) {
            first1.firstInTime = row.inTime
            first1.firstOutTime = row.outTime
            flag1 = flag1 + 5
          }
          if (row.inTime === 0 && row.outTime === 0) {
            row.inTime -= first1.firstInTime
            row.outTime -= first1.firstOutTime
            row.inTime = lastRange1.lastInTime
            row.outTime = lastRange1.lastOutTime
            row.inTimes = lastRange1.lastInTimes
            row.outTimes = lastRange1.lastOutTimes
            row.range = [row.inTime, row.outTime]
            return row
          }
          if (
            !flag2 &&
            (row.inTime - first1.firstInTime < 0 ||
              row.outTime - first1.firstOutTime < 0)
          ) {
            last1.inTime = lastRange1.lastInTime
            last1.outTime = lastRange1.lastOutTime
            flag2 = flag2 + 5
          }
          if (
            row.inTime - first1.firstInTime < 0 ||
            last1.outTime - first1.firstOutTime < 0
          ) {
            row.inTime += last1.inTime
            row.outTime += last1.outTime
          } else {
            row.inTime -= first1.firstInTime
            row.outTime -= first1.firstOutTime
          }

          row.range = [row.inTime, row.outTime]
          lastRange1.lastInTime = row.inTime
          lastRange1.lastOutTime = row.outTime
          lastRange1.lastInTimes = row.inTimes
          lastRange1.lastOutTimes = row.outTimes
          return row
        },
      })

      const chart = new Chart({
        container: `RoomDetail${registerId}`,
        autoFit: true,
        height: 440,
        padding: [24, 75, 96],
      })

      chart.data(dv.rows)
      chart.scale({
        reqTime: {
          type: 'time',
          tickCount: 8,
          mask: 'MM/DD HH:mm',
        },
        inTime: {
          alias: '插卡时长(minutes)',
          tickInterval: 50,
        },
        outTime: {
          alias: '拔卡时长(minutes)',
          tickInterval: 50,
        },
      })

      chart.axis('outTime', {
        grid: null,
        title: {},
      })
      chart.axis('inTime', {
        nice: true,
        title: {},
      })

      chart.legend({
        position: 'top',
        custom: true, // 自定义图例
        offsetY: 2,
        items: [
          {
            name: '插卡时长',
            value: 'inTime',
            marker: {
              symbol: 'circle',
              style: { fill: 'l(100) 0:#a50f15 1:#fee5d9', r: 5 },
            },
          },
          {
            name: '拔卡时长',
            value: 'outTime',
            marker: {
              symbol: 'circle',
              style: { fill: 'l(100) 0:#293c55 1:#f7f7f7', r: 5 },
            },
          },
        ],
      })

      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      })

      chart.option('slider', {
        start: 0.1,
        end: 0.8,
        trendCfg: {
          isArea: false,
        },
      })

      chart
        .area()
        .position('reqTime*inTime')
        .color('l(100) 0:#a50f15 1:#fee5d9')
      chart
        .area()
        .position('reqTime*outTime')
        .color('l(100) 0:#293c55 1:#f7f7f7')

      chart.interaction('element-visible-filter')

      chart.render()
    }
  }, [data, registerId])

  return (
    <>
      <Skeleton loading={loading} active>
        <div id={`RoomDetail${registerId}`}></div>
      </Skeleton>
    </>
  )
}
export default memo(RoomDetail)
